//职员管理

import React, {Component} from 'react';
import app from '../app';
import {Form, Input, Button, Table, Modal, Row, Upload, Icon, DatePicker, Select, Pagination} from 'antd';
import {project, supplier} from '../value';
import '../css/other.css';
import '../css/userManage.css';
import moment from 'moment';
import {config} from "../config";
import {AddSuppliers, EditSuppliers} from '../components/operateManage';


const FormItem = Form.Item;
const confirm = Modal.confirm;
const RangePicker = DatePicker.RangePicker;
const Option = Select.Option;

class SupplierManage extends Component {
    constructor(props) {
        super(props);
        this.state = {
            searchData: {},
            pagination: {current: 1, pageSize: 10, total: 0},
            positionId: [],
            data: [
                {
                    order: '01',
                    order_number: 1,
                    customer_name: 1,
                    status: 1,
                    address: '1',
                    money: 12,
                    good_contact: 'ee',
                    good_type: '饼干',
                    created_at: '2018-12-12',
                    is_team: 1,
                    remark: '加速'
                },
                {
                    order: '02',
                    order_number: 1,
                    customer_name: 1,
                    status: 1,
                    address: '1',
                    money: 12,
                    good_contact: 'ee',
                    good_type: '饼干',
                    created_at: '2018-12-12',
                    is_team: 2,
                    remark: '加速'
                }
            ],
            currentPageSize: 0,
            pageCount: 0,
            imgUrl: '',
        }
    }

    columns = [
        {
            title: '序号',
            dataIndex: 'order_number'
        },
        {
            title: '供应商编号',
            dataIndex: 'supplier_code'
        },
        {
            title: '供应商名',
            dataIndex: 'supplier_name'
        },
        {
            title: '详细地址',
            dataIndex: 'supplier_address'
        },
        {
            title: '联系人',
            dataIndex: 'supplier_contact'
        },
        {
            title: '联系方式',
            dataIndex: 'supplier_phone'
        },
        {
            title: '简介',
            dataIndex: 'supplier_text'
        },
        {
            title: '创建时间',
            dataIndex: 'supplier_createtime',
            render: supplier_createtime => {
                return (
                    <span>{moment(supplier_createtime).format('YYYY-MM-DD HH:mm:ss')}</span>
                )
            }
        },
        {
            title: '是否有效',
            dataIndex: 'supplier_isable',
            render: supplier_isable => {
                return (
                    <span>{
                        supplier_isable === '1' ?
                            <span style={{color: 'red'}}>有效</span>
                            :
                            <span style={{color: '#999'}}>无效</span>
                    }</span>
                )
            }
        },
        {
            title: '操作',
            dataIndex: this.columns,
            render: data => {
                return (
                    <div>
                        <EditSuppliers data={data} refresh={() => this.handleRefreshAfterUpdate()}></EditSuppliers>
                        {
                            data.supplier_isable === '1' ? <Button style={{marginLeft: '10px'}} type="danger"
                                                                   onClick={() => this.handleEditStatus(data.supplier_id, 0)}>停用</Button> :
                                <Button style={{marginLeft: '10px'}} type="primary"
                                        onClick={() => this.handleEditStatus(data.supplier_id, 1)}>启用</Button>
                        }
                        <Button style={{marginLeft: '10px'}} type="danger"
                                onClick={() => this.handleEditStatus(data.supplier_id, 2)}>删除</Button>
                    </div>
                )
            }
        },
    ];

    render() {
        const {pagination, currentPageSize} = this.state;
        return (
            <div style={{paddingBottom: 25}}>
                <div className="pageTitle">
                    供应商管理
                </div>
                <SearchLists refresh={() => this.handleRefreshAfterCreate()}
                             clickSearch={(values) => this.handleGetValue(values)}/>
                <div className={'btnContainer'}>
                    <AddSuppliers refresh={() => this.handleRefreshAfterCreate()}></AddSuppliers>
                </div>
                <div style={{fontSize: 12, marginBottom: 20, marginTop: 20}}>
                    当前第<span style={{color: 'red'}}>{pagination.current}</span>页, 当前页共<span
                    style={{color: 'red'}}>{currentPageSize}</span>条数据，一共<span
                    style={{color: 'red'}}>{pagination.total}</span>条数据
                </div>
                <Row style={{marginTop: '20px'}}>
                    <Table
                        columns={this.columns}
                        rowKey={(record, index) => index}
                        dataSource={this.state.data}
                        loading={this.state.loading}
                        pagination={false}
                        onChange={this.handleTableChange}
                    />
                </Row>
                <Row style={{textAlign: 'right', marginTop: 20}}>
                    <Pagination {...pagination} showSizeChanger showQuickJumper
                                onChange={(page, pageSize) => this.handleOnChange(page, pageSize)}
                                onShowSizeChange={(current, size) => this.handleOnShowSizeChange(current, size)}/>
                </Row>
            </div>
        )
    }

    /**
     * 初始化
     */
    componentDidMount() {
        const param = {
            page: 1,
            size: 10
        };
        this.handleSearchSupplierList(param);
    }

    /**
     * 获取搜索条件
     */
    handleGetValue(value) {
        const searchData = {
            nameSearch: value.nameSearch,
            contactSearch: value.contactSearch,
            phoneSearch: value.phoneSearch,
            ableSearch: value.ableSearch
        };
        this.setState({searchData});
        const param = {
            page: 1,
            size: 10,
            ...searchData
        };
        this.handleSearchSupplierList(param);
    }

    /**
     * 处理创建后刷新事件
     */
    handleRefreshAfterCreate() {
        const {searchData} = this.state;
        const param = {
            page: 1,
            size: 10,
            ...searchData
        };
        this.handleSearchSupplierList(param);
    }

    /**
     * 处理删除后刷新事件
     */
    handleRefreshAfterDelete() {
        const {searchData} = this.state;
        const param = {
            page: 1,
            size: 10,
            ...searchData
        };
        this.handleSearchSupplierList(param);
    }

    /**
     * 处理更新后刷新事件
     */
    handleRefreshAfterUpdate() {
        const {searchData, pagination} = this.state;
        const param = {
            page: pagination.current,
            size: pagination.pageSize,
            ...searchData
        };
        this.handleSearchSupplierList(param);
    }

    /**
     * 处理页码、显示数量变化事件
     * @param pagination
     * @param filters
     * @param sorter
     */
    handleTableChange = (pagination, filters, sorter) => {
        const current = pagination.current;
        const size = pagination.pageSize;
        const pagination1 = this.state.pagination;
        pagination1.current = current;
        pagination1.pageSize = size;
        this.setState({pagination: pagination1});
    };

    /**
     * 处理页面改变事件
     * @param page
     * @param pageSize
     */
    handleOnChange(page, pageSize) {
        const {searchData} = this.state;
        const param = {
            page,
            size: pageSize,
            ...searchData
        };
        this.handleSearchSupplierList(param);
    }

    /**
     * 处理pageSize变化回调
     * @param current
     * @param size
     */
    handleOnShowSizeChange(current, size) {
        const {searchData} = this.state;
        const param = {
            page: current,
            size,
            ...searchData
        };
        this.handleSearchSupplierList(param);
    }

    /**
     * 查找供应商列表
     * @param param
     */
    handleSearchSupplierList(param) {
        let _this = this;
        _this.setState({loading: true});
        app.post(supplier.SEARCH_SUPPLIER_LIST, param).then(result => {
            if (result.code === 1) {
                const data = result.data;
                for (let i = 0; i < data.length; i++) {
                    data[i].order_number = i + 1;
                }
                const pagination = {total: data.length, current: param.page, pageSize: param.size};
                this.setState({pagination, data: data, loading: false, currentPageSize: data.length});
            } else {
                app.alert(result.msg, 'success', 2);
                const pagination = {total: 0, current: 0, pageSize: 0};
                this.setState({pagination, data: [], loading: false, currentPageSize: 0});
            }
        });
    }

    /**
     * 删除用户
     * @param id
     */
    handleDeleteUser(id) {
        let _this = this;
        confirm({
            content: '您确定要删除该用户吗？',
            onOk() {
                app.post(project.DELETE_PROJECT, {project_id: id}).then((req) => {
                    if (req.code == '1') {
                        app.alert("删除成功", 'success', 2);
                        _this.handleRefreshAfterDelete();
                    } else {
                        app.alert(req.msg, 'error', 2);
                    }
                })
            },
            onCancel() {
            },
        });
    }

    /**
     * 操作用户状态
     */
    handleEditStatus(id, type) {
        const _this = this;
        if (type === 2) {
            confirm({
                content: '您确定要删除该供应商吗？',
                onOk() {
                    app.post(supplier.UPDATE_SUPPLIER_ISABLE, {supplier_id: id, supplier_isable: '2'}).then((req) => {
                        if (req.code === 1) {
                            app.alert("删除成功", 'success', 1);
                            _this.handleRefreshAfterDelete();
                        } else {
                            app.alert(req.msg, 'error', 1);
                        }
                    })
                },
                onCancel() {
                },
            });
        } else if (type === 0) {
            confirm({
                content: '您确定要停用该供应商吗？',
                onOk() {
                    app.post(supplier.UPDATE_SUPPLIER_ISABLE, {supplier_id: id, supplier_isable: '0'}).then((req) => {
                        if (req.code === 1) {
                            app.alert("停用成功", 'success', 1);
                            _this.handleRefreshAfterUpdate();
                        } else {
                            app.alert(req.msg, 'error', 1);
                        }
                    })
                },
                onCancel() {
                },
            });
        } else if (type === 1) {
            app.post(supplier.UPDATE_SUPPLIER_ISABLE, {supplier_id: id, supplier_isable: '1'}).then((req) => {
                if (req.code === 1) {
                    app.alert("启用成功", 'success', 1);
                    _this.handleRefreshAfterUpdate();
                } else {
                    app.alert(req.msg, 'error', 1);
                }
            })
        }
    }
}


class SearchList extends Component {
    constructor(props) {
        super(props);
        this.state = {
            project_name: '',
            typeList: [
                {
                    id: '01',
                    name: '会员注册奖励'
                }
            ]
        }
    };

    render() {
        return (
            <div className={'user-search-container'}>
                <div className={'user-search-item1'}>
                    <div className={'user-search-item-type'}>供应商名：</div>
                    <Input placeholder={'供应商名'} style={{width: 180}}
                           onChange={(e) => this.handleUserNameChange(e)}
                           onPressEnter={(e) => this.handleUserNamePress(e)}/>
                </div>
                <div className={'user-search-item1'} style={{marginLeft: 10}}>
                    <div className={'user-search-item-phone'}>联系人：</div>
                    <Input placeholder={'客户名称'} style={{width: 150}}
                           onChange={(e) => this.handleContactChange(e)}
                           onPressEnter={(e) => this.handleContactPress(e)}/>
                </div>
                <div className={'user-search-item1'} style={{marginLeft: 10}}>
                    <div className={'user-search-item-phone'}>联系方式：</div>
                    <Input placeholder={'联系方式'} style={{width: 150}}
                           onChange={(e) => this.handlePhoneChange(e)}
                           onPressEnter={(e) => this.handlePhonePress(e)}/>
                </div>
                <div className={'user-search-item1'} style={{marginLeft: 10}}>
                    <div className={'user-search-item-status'}>是否有效：</div>
                    <Select style={{width: 110}} placeholder={'请选择状态'} onChange={(e) => this.handleStatusChange(e)}>
                        <Option value="1">有效</Option>
                        <Option value="0">无效</Option>
                    </Select>
                </div>
                <div className={'user-search-footer'}>
                    <Button type="primary" onClick={() => this.handleSearchComplain()}>搜索</Button>
                    {/*<AddInvitationActivitys refresh={() => this.handleRefreshAfterCreate()}></AddInvitationActivitys>*/}
                </div>
            </div>
        )
    };

    componentDidMount() {
    };

    /**
     * 处理用户名输入框变化事件
     * @param e
     */
    handleUserNameChange(e) {
        this.setState({user_name: e.target.value});
    }

    /**
     * 处理手机号输入框变化事件
     * @param e
     */
    handlePhoneChange(e) {
        this.setState({phone: e.target.value});
    }

    /**
     * 处理种类状态框变化事件
     * @param e
     */
    handleContactChange(e) {
        this.setState({contact: e.target.value});
    }

    /**
     * 状态选择变化事件
     * @param e
     */
    handleStatusChange(e) {
        this.setState({status: e});
        this.handleSearchComplain1({key: 'status', value: e});
    }

    handleUserNamePress(e) {
        this.handleSearchComplain1({key: 'user_name', value: e.target.value});
    }

    handlePhonePress(e) {
        this.handleSearchComplain1({key: 'phone', value: e.target.value});
    }

    handleContactPress(e) {
        this.handleSearchComplain1({key: 'contact', value: e.target.value});
    }

    /**
     * 获取搜索条件
     */
    handleSearchComplain1(param) {
        let {user_name, phone, status, contact} = this.state;
        if (param.key === 'user_name') {
            user_name = param.value;
        }
        if (param.key === 'phone') {
            phone = param.value;
        }
        if (param.key === 'status') {
            status = param.value;
        }
        if (param.key === 'contact') {
            contact = param.value;
        }
        let data = {
            nameSearch: user_name,
            phoneSearch: phone,
            ableSearch: status,
            contactSearch: contact
        };
        this.props.clickSearch(data);
    };

    /**
     * 搜索
     */
    handleSearchComplain() {
        let {user_name, phone, status, contact} = this.state;
        let data = {
            nameSearch: user_name,
            phoneSearch: phone,
            ableSearch: status,
            contactSearch: contact
        };
        this.props.clickSearch(data);
    }
}

const SearchLists = Form.create()(SearchList);
const SupplierManages = Form.create()(SupplierManage);

export default SupplierManages;